<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" v-if="subjects.id && subjects.name">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ subjects.id ? subjects.name : '' }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <template>
          <div class="top">
            <!-- 卡片1 -->
            <!-- 左边 -->
            <el-form :inline="true">
              <el-form-item label="标签名称">
                <el-input size="small" v-model="q.tagName" />
              </el-form-item>
              <el-form-item label="状态" style="margin-left: 30px">
                <el-select size="small" v-model="q.state">
                  <el-option
                    :value="item.value"
                    :label="item.label"
                    v-for="item in state"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="del">清除</el-button>
                <el-button size="small" type="primary" @click="initTagsList">搜索</el-button>
              </el-form-item>
            </el-form>

            <!-- 右边 -->
            <div class="right">
              <el-button
                v-if="subjects.id && subjects.name"
                type="text"
                class="colright"
                icon="el-icon-back"
                @click="$router.back()"
                >返回学科</el-button
              >
              <el-button type="success" size="small" @click="addTags"> <i class="el-icon-edit"></i> 新增标签</el-button>
            </div>
          </div>
        </template>

        <!-- 记录 -->
        <template>
          <el-tag type="info" style="width:100%;margin-top: -5px;height:40px;line-height:40px">
            <!-- 图标 -->
            <i class="el-icon-info"></i>
            <!-- 文本 -->
            <span style="margin-left: 7px">共 {{ total }} 条记录</span>
          </el-tag>
        </template>

        <!-- 卡片2 -->
        <div class="box-card">
          <el-table :data="tagsList">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="所属学科" prop="subjectName"></el-table-column>
            <el-table-column label="标签名称" prop="tagName"></el-table-column>
            <el-table-column label="创建者" prop="username"></el-table-column>
            <el-table-column label="创建日期" prop="addDate">
              <template v-slot="{ row }">{{ row.addDate | dateFormat }}</template>
            </el-table-column>
            <el-table-column label="状态" prop="state">
              <template v-slot="{ row }">
                {{ row.state === 1 ? '已启用' : '已禁用' }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="{ row }">
                <div class="center-item">
                  <el-button type="text" @click="editState(row)">{{ row.state == 1 ? '禁用' : '启用' }}</el-button>
                  <el-button type="text" :disabled="row.state === 1" @click="editTags(row.id)">修改</el-button>
                  <el-button type="text" :disabled="row.state === 1" @click="removeTags(row.id)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            :page-sizes="[5, 10, 20, 50]"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page.sync="q.page"
            :page-size="q.pagesize"
            layout=" prev, pager, next,sizes, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 新增标签对话框 -->
    <tagsAdd :id.sync="id" :show-dialog.sync="isShowTags" @reload="initTagsList" />
    <!-- 修改标签 -->
    <tagsEdit :id.sync="editId" :show-dialog.sync="isShowTagsEdit" @reload="initTagsList" />
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'
import { status } from '@/api/hmmm/constants.js'
import tagsAdd from '@/module-hmmm/components/tags-add'
import tagsEdit from '@/module-hmmm/components/tags-edit'

export default {
  data() {
    return {
      // 标签查询参数
      q: {
        page: 1,
        pagesize: 10,
        // 标签名
        tagName: ''
      },
      total: 0,
      // 下拉状态
      state: status,
      // 标签列表
      tagsList: [],
      // 学科列表
      subjectsList: [],
      // 增添对话框展示与否
      isShowTags: false,
      // 标签状态id
      id: '',
      // 修改对话框展示与否
      isShowTagsEdit: false,
      // 修改id
      editId: ''
    }
  },
  components: {
    tagsAdd,
    tagsEdit
  },
  // 获取地址栏数据
  computed: {
    subjects() {
      return this.$route.query || null
    }
  },
  // 侦听地址栏数据
  watch: {
    '$route.query'() {
      this.initTagsList()
    }
  },
  created() {
    this.initTagsList()
    this.initSubjectList()
  },
  methods: {
    // 标签列表
    async initTagsList() {
      const result = await list({ ...this.q, subjectID: this.subjects.id || undefined })
      // const result = await list(this.q)
      // console.log(result)
      // 总信息条数
      this.total = result.data.counts
      // 列表数据
      this.tagsList = result.data.items
    },

    // 学科列表
    async initSubjectList() {
      const result = await simple({ ...this.q })
      console.log(result)
      this.subjectsList = result.data
    },

    // 清除输入框
    resetInput() {
      this.q.tagName = ''
      this.q.state = ''
      this.initTagsList()
    },
    // 新增
    async addTags() {
      this.isShowTags = true
    },
    // 修改标签状态按钮
    async editState(row) {
      console.log(row)
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })

      //  const state = row.state === 1 ? 0 : 1
      // row.state = state
      row.state = row.state === 1 ? 0 : 1
      this.$message.success('操作成功')
    },
    // 修改对话框展示
    editTags(id) {
      this.editId = id
      this.isShowTagsEdit = true
    },
    // 删除
    async removeTags(id) {
      // console.log(row)
      const result = await this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result === 'cancel') return
      await remove({ id: id })
      this.$message.success('删除成功！')
      this.initTagsList()
    },
    // 监听页码值的改变
    handleCurrentChange(newPage) {
      this.q.page = newPage
      this.initTagsList()
    },

    // 一页几条
    handleSizeChange(newSize) {
      this.q.pagesize = newSize
      this.initTagsList()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  padding-bottom: 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.block {
  float: right;
  margin: 20px 0;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.el-col {
  margin-right: 10px;
}
.box-button {
  margin-left: 100px;
}
.box-card {
  margin-top: 15px;
}

.center-item {
  display: flex;
  justify-content: space-between;
}
</style>
